<template>
  <div>
    <el-dialog :title="maintitle" :visible.sync="dialogVisible" width="60%">
      <el-form labelWidth="100px">
        <el-form-item label="人员姓名" class="is-required">
          <searchperson
            v-if="issearchperson"
            @getpersonid="getpersonid"
            :itempersonid="licenseData.hash.pid"
          ></searchperson>
          <div class="el-form-item__error" v-if="!$v.licenseData.hash.pid.required">
            请选择人员姓名
          </div>
        </el-form-item>
        <el-form-item label="人员类别" class="is-required">
          <el-select v-model="licenseData.hash.cardtype" placeholder="请选择" style="width:100%" clearable>
            <el-option
              v-for="item in itemdata1"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.licenseData.hash.cardtype.required">
            请选择人员类别
          </div>
        </el-form-item>
        <el-form-item label="证书编号" class="is-required">
          <el-input v-model="licenseData.hash.cardnum" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.licenseData.hash.cardnum.required">
            请输入证书编号
          </div>
          <!-- <div class="el-form-item__error" v-if="!$v.licenseData.hash.cardnum.alphaNum">
            证书编号格式有误
          </div> -->

        </el-form-item>
        <el-form-item label="IC卡号" class="is-required">
          <el-input v-model="licenseData.hash.icnum" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.licenseData.hash.icnum.required">
            请输入IC卡号
          </div>
          <!-- <div class="el-form-item__error" v-if="!$v.licenseData.hash.icnum.alphaNum">
            IC卡号格式有误
          </div> -->
        </el-form-item>{{occupation_typeArr}}
        <el-form-item label="职业领域" class="is-required">
          <el-checkbox-group v-model="occupation_typeArr">
            <el-checkbox
              v-for="item in itemdata2"
              :key="item.value"
              :label="item.hash.code_id"
            >{{item.hash.code_name}}</el-checkbox>
          </el-checkbox-group>
          <div class="el-form-item__error" v-if="occupation_typeArr.length==0">
            请选择职业领域
          </div>
        </el-form-item>
        <el-form-item label="从业资格" class="is-required">
          <el-checkbox-group v-model="position_typeArr">
            <el-checkbox
              v-for="it in itemdata3"
              :key="it.value"
              :label="it.hash.code_id"
            >{{it.hash.code_name}}</el-checkbox>
          </el-checkbox-group>
          <div class="el-form-item__error" v-if="position_typeArr.length==0">
            请选择从业资格
          </div>
        </el-form-item>
        <el-form-item label="有效期" class="is-required">
          <el-date-picker
            v-model="licenseData.hash.starttime"
            style="width:100%;margin-right:20px"
            type="date"
            placeholder="开始日期"
            valueFormat="yyyy-MM-dd"
            clearable
          >
          </el-date-picker>
          <el-date-picker
            v-model="licenseData.hash.validtime"
            style="width:100%;margin-right:20px"
            type="date"
            placeholder="结束日期"
            valueFormat="yyyy-MM-dd"
            clearable
          ></el-date-picker>
          <div class="el-form-item__error" v-if="!$v.licenseData.hash.starttime.required||!$v.licenseData.hash.validtime.required">
            请选择有效期
          </div>
        </el-form-item>
        <el-form-item label="附件">
          <upload2 :filelimit="5" :filelink.sync="filelink" :ispic="false" :isedit="false"></upload2>
        </el-form-item>
        <el-form-item>
          <div>&nbsp;</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addlicense">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchperson from '~/components/common/searchperson.vue';
import upload2 from '~/components/common/upload2.vue';
import { required, alphaNum } from 'vuelidate/lib/validators';

export default {
  validations: {
    licenseData: {
      hash: {
        pid: {
          required,
        },
        cardtype: {
          required,
        },
        cardnum: {
          required,
        },
        icnum: {
          required,
        },
        starttime: {
          required,
        },
        validtime: {
          required,
        },

      },
    },
  },
  data() {
    return {
      dialogVisible: true,
      ts: this.newStore(),
      disable: false,
      issearchperson: true,
      maintitle: '添加上岗信息',
      licenseData: {
        cols: [],
        hash: {
          username: '',
          cardtype: '',
          cardnum: '',
          icnum: '',
          occupation_type: '',
          position_type: '',
          starttime: '',
          validtime: '',
          id: '',
          pid: '',
        },
      },
      filelink: [],
      changeval: 0,
      licenselist: [],
      fielname: [],
      fileurl: [],
      occupation_typeArr: [],
      position_typeArr: [],
      isIndeterminate: true,
    };
  },
  props: {
    itemdata1: Array,
    itemdata2: Array,
    itemdata3: Array,
    itemvalname: Object,
    chousebtn: Number,
  },
  components: {
    upload2,
    searchperson,
  },
  created() {
    // this.getlicenseval();
    if (this.chousebtn == 2) {
      this.maintitle = '修改上岗信息';
      this.occupation_typeArr = [];
      this.position_typeArr = [];
      // console.log(this.itemvalname, "修改上岗信息");
      const req = {
        handle:
          '1CB43CC1631B5D5B14CBF34BC23B86F231062A3F18BDCAFA5F53575C3A20D9CDC47AAF63316A7F98',
        id: this.itemvalname.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.licenseData = ts.d.data.operation1[0];
        for (let i = 0; i < ts.d.data.operation4.length; i += 1) {
          const a = {};
          a.name = ts.d.data.operation4[i].hash.filename;
          a.url = ts.d.data.operation4[i].hash.fileurl;
          this.filelink.push(a);
          // console.log(this.filelink,'5555555555')
        }
        for (let i = 0; i < ts.d.data.operation2.length; i += 1) {
          this.occupation_typeArr.push(ts.d.data.operation2[i].hash.detail_type);
        }
        for (let i = 0; i < ts.d.data.operation3.length; i += 1) {
          this.position_typeArr.push(ts.d.data.operation3[i].hash.detail_type);
        }
        this.reload();
        this.disable = true;
      });
    }
  },
  mounted() {
    // this.getlicenseval();
  },
  methods: {
    reload() {
      this.issearchperson = false;
      this.$nextTick(() => {
        this.issearchperson = true;
      });
    },
    // 公共方法图片数组转路径数组
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
    // 渲染信息
    getlicenseval() {
      // console.log(this.itemvalname, "222");
      if (this.itemvalname == '' || this.itemvalname == undefined) {

      } else if (this.chousebtn == 2) {
        this.licenseData = {};
        // console.log(this.itemvalname, "1");
        // console.log(this.licenseData, "2");
        this.licenseData = this.itemvalname;
        // console.log(this.licenseData, "dddddddd");
      }
    },
    // 获取姓名
    getpersonid(val) {
      this.changeval = 1;
      this.licenseData.hash.pid = val.id;
      this.licenseData.hash.username = val.value;
    },
    // 增加/编辑上岗证信息
    addlicense() {
      if (this.occupation_typeArr.length == 0 || this.position_typeArr.length == 0) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
        return;
      }
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else if (this.chousebtn == 1) {
        this.$confirm('是否添加该上岗证信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle:
                '1CB43CC1631B5D5B14CBF34BC23B86F231062A3F18BDCAFA9C47A9C6A2C9523A31C7BEC107ACD3D0',
              username: this.licenseData.hash.username,
              cardtype: this.licenseData.hash.cardtype,
              cardnum: this.licenseData.hash.cardnum,
              icnum: this.licenseData.hash.icnum,
              // occupation_type: this.licenseData.hash.occupation_type,
              // position_type: this.licenseData.hash.position_type,
              occupation_type: this.occupation_typeArr,
              position_type: this.position_typeArr,
              starttime: this.licenseData.hash.starttime,
              validtime: this.licenseData.hash.validtime,
              pid: this.licenseData.hash.pid,
              fielname: this.postname(this.filelink),
              fileurl: this.posturl(this.filelink),
            };
            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              // console.log(req, "111");
              this.$message({
                type: 'success',
                message: '添加成功!',
              });
              this.dialogVisible = false;
              this.$parent.getlicenselist();
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      } else if (this.chousebtn == 2) {
        this.$confirm('是否修改该上岗证信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle:
                '1CB43CC1631B5D5B14CBF34BC23B86F231062A3F18BDCAFA94A2264987B79E71BC8C24080344A196',
              username: this.licenseData.hash.username,
              cardtype: this.licenseData.hash.cardtype,
              cardnum: this.licenseData.hash.cardnum,
              icnum: this.licenseData.hash.icnum,
              // occupation_type: this.licenseData.hash.occupation_type,
              // position_type: this.licenseData.hash.position_type,
              occupation_type: this.occupation_typeArr,
              position_type: this.position_typeArr,
              starttime: this.licenseData.hash.starttime,
              validtime: this.licenseData.hash.validtime,
              pid: this.licenseData.hash.pid,
              id: this.licenseData.hash.id,
              fielname: this.postname(this.filelink),
              fileurl: this.posturl(this.filelink),
            };
            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              // console.log(ts.d);
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.dialogVisible = false;
              // this.$emit("update:addlicense", this.licenseData);
              this.$parent.getlicenselist();
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
</style>
